<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.css">
    <script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
    <title>订单记录</title>
    <style>
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .button-container-right {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }
        .page-title {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            font-weight: bold;
        }
        .table {
            font-size: 14px;
            background-image: url('img_13.png');
            background-size: cover;
            background-position: center;
            opacity: 0.9;
        }
        .table td, .table th {
            padding: 12px;
            vertical-align: middle;
            background-color: rgba(255, 255, 255, 0);
        }
        .table-container {
            margin-top: 60px;
        }
        .confirmed {
            color: red;
        }
    </style>
</head>
<body>
<div id="app" class="container-fluid py-5">
    <!-- 右上角按钮容器 -->
    <div class="button-container-right">
        <button class="btn btn-info" @click="goBack">返回</button>
    </div>
    <!-- 标题 -->
    <h1 class="page-title">订单记录</h1>
    <div class="container">
        <div class="bg-white rounded p-3 shadow-sm table-container">
            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th scope="col">订单编号</th>
                    <th scope="col">商品名称</th>
                    <th scope="col">数量</th>
                    <th scope="col">邮寄地址</th>
                    <th scope="col">支付方式</th>
                    <th scope="col">状态</th>
                    <th scope="col">创建时间</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="order in orders" :key="order.id">
                    <td>{{ order.id }}</td>
                    <td>{{ order.productName }}</td>
                    <td>{{ order.quantity }}</td>
                    <td>{{ order.shippingAddress }}</td>
                    <td>{{ order.paymentMethod }}</td>
                    <td>
                        <span :class="{ confirmed: order.status === '已确认' }">
                            {{ order.status }}
                        </span>
                    </td>
                    <td>{{ order.createdAt }}</td>
                    <td>
                        <button v-if="!order.isConfirmed" @click="confirmOrder(order)">确认订单</button>
                        <button v-if="!order.isConfirmed" @click="deleteOrder(order)">删除订单</button>
                        <button v-else @click="cancelConfirmOrder(order)">取消确认</button>
                        <button @click="editOrder(order)">修改</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    const App = {
        data() {
            return {
                orders: []
            };
        },
        methods: {
            fetchOrders() {
                axios.get('/api/orders')
                    .then(response => {
                        this.orders = response.data.map(order => ({
                            ...order,
                            isConfirmed: order.status === '已确认'
                        }));
                    })
                    .catch(error => {
                        console.error("获取订单记录失败：", error);
                    });
            },
            confirmOrder(order) {
                order.status = '已确认';
                axios.put(`/api/orders/${order.id}`, { status: '已确认' })
                    .then(response => {
                        order.isConfirmed = true;
                        alert('订单已确认！');
                    })
                    .catch(error => {
                        console.error('确认订单失败：', error);
                        alert('确认订单失败，请重试。');
                        order.status = '已创建';
                    });
            },
            cancelConfirmOrder(order) {
                order.status = '已创建';
                axios.put(`/api/orders/${order.id}`, { status: '已创建' })
                    .then(response => {
                        order.isConfirmed = false;
                        alert('订单确认已取消！');
                    })
                    .catch(error => {
                        console.error('取消确认订单失败：', error);
                        alert('取消确认订单失败，请重试。');
                        order.isConfirmed = true;
                    });
            },
            deleteOrder(order) {
                axios.delete(`/api/orders/${order.id}`)
                    .then(response => {
                        const index = this.orders.indexOf(order);
                        if (index !== -1) {
                            this.orders.splice(index, 1);
                        }
                        alert('订单已删除！');
                    })
                    .catch(error => {
                        console.error('删除订单失败：', error);
                        alert('删除订单失败，请重试。');
                    });
            },
            editOrder(order) {
                const url = `order.html?productId=${order.productId}&userId=${order.userId}&productName=${encodeURIComponent(order.productName)}`;
                window.location.href = url;
            },
            goBack() {
                window.history.back();
            }
        },
        mounted() {
            this.fetchOrders();
        }
    };
    const app = Vue.createApp(App);
    app.mount("#app");
</script>
</body>
</html>